<template>
  <form @submit="search">
    <input type="text" :placeholder="text" v-model="value" />
    <md-icon name="search" class="search"></md-icon>
  </form>
</template>

<script>
import { Icon } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Icon.name]: Icon
  },
  props: {
    text: {
      type: String
    }
  },
  data() {
    return {
      value: ""
    };
  },
  methods: {
    search(e) {
      e.preventDefault();
      this.$emit("changeSearch", this.value);
    }
  }
};
</script>

<style scoped lang="stylus">
form{
  padding 20px 20px 14px 20px;
  position relative;
  input{
    width 100%;
    padding 19px 46px;
    box-sizing border-box;
    border-radius 40px;
    outline none;
    border 1px solid #F0F0F0;
    font-size 28px
    color #666666
    background #F0F0F0
  }
  input::-webkit-input-placeholder{
    color #cccccc
  }
  input:-ms-input-placeholder { // IE10+
    color #cccccc
  }
  input:-moz-placeholder { // Firefox4-18
    color: #cccccc;
  }
  input::-moz-placeholder { // Firefox19+
    color: #cccccc;
  }
  .search{
    position absolute;
    padding 19px 23px;
    right 20px;
    color #cccccc
  }
}
</style>
